<template>

  <div class="common-layout">
    <el-container>
      <el-aside class="el-main-content2">
        <!-- 学科搜索开始 -->
        <el-input v-model="subjectName" style="width: 200px" placeholder="请输入学科" clearable
                  @keyup.enter="searchSubject" />
        <el-button type="primary" icon="Search" @click="searchSubject">搜索</el-button>
        <!-- 学科搜索结束 -->

        <!-- 学科渲染开始 -->
        <el-tree style="font-size: large; background-color: transparent;" :default-expanded-keys="[0]"
                 :default-checked-keys="[0]" :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick" />
        <!-- 学科渲染结束 -->
      </el-aside>
      <el-main class="el-main-content">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="start()">开始刷题</el-button>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchForm.name" placeholder="请输入题库名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.status" placeholder="请选择审批状态" clearable style="width: 240px">
              <el-option v-for="item in options" :key="item.status" :label="item.name" :value="item.status" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="searchQuestionBank">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 题库渲染开始 -->
        <el-table ref="multipleTableRef" border v-loading="loading" row-key="sid" style="width: 100%"
                  :data="tableData"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" :selectable="selectTableStatus"/>
          <el-table-column property="name" label="题库名称" min-width="100" width="200" show-overflow-tooltip
                           align="left" />
          <el-table-column property="description" label="描述" show-overflow-tooltip align="center" />
          <el-table-column label="状态" width="100" align="center">
            <template v-slot="scope">
              {{ scope.row.status == 0 ? "未审批" : scope.row.status == 1 ? "审批通过" : "审批驳回" }}
            </template>
          </el-table-column>
          <el-table-column property="createTime" label="创建时间" min-width="173" width="173" align="center" />
          <el-table-column property="updateTime" label="修改时间" min-width="173" width="173" align="center" />
          <el-table-column label="操作" fixed="right" width="200" align="center">
            <template v-slot="scope">
              <el-button type="primary" icon="edit" style="margin-right: 10px" @click="startQuestion(scope.row.id)" :disabled="scope.row.status !==1">
                开始刷题
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 题库渲染结束 -->

        <!-- 分页开始 -->
        <br>
        <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]"
                       :background="true" layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
        <!-- 分页结束 -->

      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import axios from '@/axios/index.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import router from "@/router/index.js";
import {property} from "lodash";

let page = ref(1)
let size = ref(5)
let total = ref(10)
let tableData = ref([])//表格数据
let loading = ref(false)//加载动画
let subjectId = ref(0)//当前选中学科id
let subjectName = ref('')//模糊搜索学科条件
let data = ref([
  {
    id: 0,
    subjectName: '全部学科',
    children: []
  }
])//题库列表
let searchForm = ref({
  name: '',
  status: null
})

//模糊搜索下拉菜单
let options = ref([
  {
    name: '未审批',
    status: 0
  },
  {
    name: '审批通过',
    status: 1
  },
  {
    name: '审批驳回',
    status: 2
  }
])

const defaultProps = {
  label: 'subjectName',
  children: 'children'
}

const qids = ref([])//题库id集合

function selectTableStatus(row){
  return row.status===1;
}

function handleSelectionChange(newSelection,status){
  qids.value=[]
  for (let i = 0; i < newSelection.length; i++) {
    qids.value.push(newSelection[i].id)
  }
}


//开始刷题事件
function startQuestion(id) {
  ElMessageBox.confirm(
      '是否开始刷题',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    qids.value = []
    qids.value.push(id)
    router.push({path: '/startQuestion', query: {ids: qids.value,source:1}})
  })
}

//开始刷题事件
function start(){
  ElMessageBox.confirm(
      '是否开始刷题',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    if (subjectId.value === 0 || subjectId.value === undefined) {
      if (qids.value.length === 0 || qids.value === undefined){
        ElMessage({
          message: '请选择学科',
          type: 'error'
        })
        return
      }
    }
    router.push({path: '/startQuestion', query: {ids: qids.value,source:1,subjectId:subjectId.value}})
  })
}

//模糊搜索学科
let searchSubject = function () {
  axios.get(`/api/v1/admin/subject/name`, {
    params: {
      subjectName: subjectName.value
    }
  }).then(response => {
    data.value[0].children = response.data.data
  })
}

//模糊搜索题库
let searchQuestionBank = function () {
  axios.get(`/api/v1/admin/question/banks`, {
    params: {
      page: page.value,
      size: size.value,
      sid: subjectId.value,
      name: searchForm.value.name,
      status: searchForm.value.status
    }
  }).then(response => {
    tableData.value = response.data.data.data
    total.value = response.data.data.total
  })
}

//查询所有学科
let getSubjectList = function () {
  axios.get(`/api/v1/admin/subject/list`, {
    params: {
      currentPage: 1,
      pageSize: -1
    }
  }).then(response => {
    console.log(response);
    
    data.value[0].children = response.data.data.records
  })
}

//获取题库列表
let getQuestionsBankList = function (current, limit, sid, name, status) {
  if (current == -1 && limit == -1) {
    current = page.value
    limit = size.value

  }
  axios.get(`/api/v1/admin/question/banks`, {
    params: {
      page: current,
      size: limit,
      sid: sid,
      name: name,
      status: status
    }
  }).then(response => {
    total.value = response.data.data.total
    tableData.value = response.data.data.data
  })
}

onMounted(() => {
  getSubjectList()
  getQuestionsBankList(page.value, size.value, 0)
})

//当节点被点击时触发
const handleNodeClick = (data) => {
  subjectId.value = data.id
  getQuestionsBankList(page.value, size.value, data.id, null, null)
}

//当page发生变化时触发
const handleCurrentChange = (val) => {
  getQuestionsBankList(val, size.value, subjectId.value, searchForm.value.name, searchForm.value.status)
}

//当size发生变化时触发
const handleSizeChange = (val) => {
  getQuestionsBankList(page.value, val, subjectId.value, searchForm.value.name, searchForm.value.status)
}

</script>

<style scoped>
.common-layout {
  flex: auto;
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 10px 5px 0 10px;
  border-radius: 5px;
}

.el-main {
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 20px;
  border-radius: 5px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container {
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-main-content{
  margin-top: 50px;
}
.el-main-content2{
  margin-top: 60px;
}
</style>
